<!--
 * Description: CBOM数据新增
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/09/15 15:27
-->

<template>
  <div v-loading="isRequesting">
    <!--数据表单-->
    <el-form label-width="150px" :model="formData" size="mini">
      <el-row>
        <!--产品专案-->
        <el-col :span="12">
          <el-form-item :label="$t('Cbom.project')">
            <el-select
              v-model="formData.projectId"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in projectList"
                :key="item.projectId"
                :label="item.projectName"
                :value="item.projectId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--BU类型-->
        <el-col :span="12">
          <el-form-item :label="$t('Cbom.bu')">
            <el-input
              v-model="formData.bu"
              clearable
              disabled
              :placeholder="$t('input.placeholder')"
            />
          </el-form-item>
        </el-col>

        <!--项目名称-->
        <el-col :span="12">
          <el-form-item label="项目名称">
            <el-input
              v-model="formData.subject"
              clearable
              disabled
              :placeholder="$t('input.placeholder')"
            />
          </el-form-item>
        </el-col>
        <!--Tracking Sku-->
        <el-col :span="12">
          <el-form-item :label="$t('Cbom.trackingSku')">
            <el-input
              v-model="formData.trackingSku"
              v-blur:trackingSku="formData"
              clearable
              :disabled="isDisabled"
              :placeholder="$t('input.placeholder')"
            />
          </el-form-item>
        </el-col>
        <!--CBOM版本-->
        <el-col :span="12">
          <el-form-item :label="$t('Cbom.cbomVersion')">
            <el-input
              v-model="formData.cbomVersion"
              v-blur:cbomVersion="formData"
              clearable
              placeholder="YYYY/MM/DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button size="medium" type="primary" @click="save">{{ $t('button.save') }}</el-button>
    </span>
  </div>
</template>

<script>
import { cbomInfoAdd, cbomInfoList } from '@/api/cbom/info'
export default {
  name: 'CbomAdd',
  props: {
    /** 专案数据列表 */
    projectList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      /** 表单数据 */
      formData: {
        bu: '',
        project: '',
        projectId: '',
        subject: '',
        trackingSku: ''
      },

      projectData: {},

      isDisabled: false,
      /** 正在查询 */
      isRequesting: false
    }
  },

  watch: {
    'formData.projectId': {
      async handler(newVal) {
        try {
          this.projectData = this.projectList.find(item => item.projectId === newVal)
          const result = await cbomInfoList({ projectId: newVal })
          if (result.data.length > 0) {
            this.isDisabled = true
            this.formData.trackingSku = result.data[0].trackingSku
          } else {
            this.isDisabled = false
            this.formData.trackingSku = ''
          }
          this.formData.project = this.projectData.projectName
          this.formData.subject = this.projectData.subject
          this.formData.bu = this.projectData.bu
        } catch (error) {
          console.log(error)
          this.isDisabled = false
          this.formData.project = ''
          this.formData.trackingSku = ''
          this.formData.subject = ''
          this.formData.bu = ''
        }
      }
    }
  },

  methods: {
    async save() {
      try {
        await this.$confirmBox(this.$t('button.save'), 'success')
        this.isRequesting = true
        await cbomInfoAdd(this.formData, { msgSuccess: true, msgError: true })
        this.$bus.$emit('cbom-reload')
        this.cancel()
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },

    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped></style>
